<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>icon example</title>
    <link rel="stylesheet" href="./page.css">
    <link rel="stylesheet" href="./icon.css">
</head>
<body>
    <div class="main">
    <h1>预览字体</h1>
    <ul class="icon-list">

        <li>
            <i class="icon">&#xe001;</i>
            <div class="code">\e001</div>
            <div class="name">uniE001</div>
        </li>

        <li>
            <i class="icon">&#xe002;</i>
            <div class="code">\e002</div>
            <div class="name">uniE002</div>
        </li>

        <li>
            <i class="icon">&#xe003;</i>
            <div class="code">\e003</div>
            <div class="name">uniE003</div>
        </li>

        <li>
            <i class="icon">&#xe004;</i>
            <div class="code">\e004</div>
            <div class="name">uniE004</div>
        </li>

        <li>
            <i class="icon">&#xe005;</i>
            <div class="code">\e005</div>
            <div class="name">uniE005</div>
        </li>

        <li>
            <i class="icon">&#xe006;</i>
            <div class="code">\e006</div>
            <div class="name">uniE006</div>
        </li>

        <li>
            <i class="icon">&#xe007;</i>
            <div class="code">\e007</div>
            <div class="name">uniE007</div>
        </li>

        <li>
            <i class="icon">&#xe008;</i>
            <div class="code">\e008</div>
            <div class="name">uniE008</div>
        </li>

        <li>
            <i class="icon">&#xe009;</i>
            <div class="code">\e009</div>
            <div class="name">uniE009</div>
        </li>

        <li>
            <i class="icon">&#xe00a;</i>
            <div class="code">\e00a</div>
            <div class="name">uniE00A</div>
        </li>

        <li>
            <i class="icon">&#xe00b;</i>
            <div class="code">\e00b</div>
            <div class="name">uniE00B</div>
        </li>

        <li>
            <i class="icon">&#xe00c;</i>
            <div class="code">\e00c</div>
            <div class="name">uniE00C</div>
        </li>

        <li>
            <i class="icon">&#xe00d;</i>
            <div class="code">\e00d</div>
            <div class="name">uniE00D</div>
        </li>

        <li>
            <i class="icon">&#xe00e;</i>
            <div class="code">\e00e</div>
            <div class="name">uniE00E</div>
        </li>

        <li>
            <i class="icon">&#xe00f;</i>
            <div class="code">\e00f</div>
            <div class="name">uniE00F</div>
        </li>

        <li>
            <i class="icon">&#xe010;</i>
            <div class="code">\e010</div>
            <div class="name">uniE010</div>
        </li>

        <li>
            <i class="icon">&#xe011;</i>
            <div class="code">\e011</div>
            <div class="name">uniE011</div>
        </li>

        <li>
            <i class="icon">&#xe012;</i>
            <div class="code">\e012</div>
            <div class="name">uniE012</div>
        </li>

        <li>
            <i class="icon">&#xe013;</i>
            <div class="code">\e013</div>
            <div class="name">uniE013</div>
        </li>

        <li>
            <i class="icon">&#xe014;</i>
            <div class="code">\e014</div>
            <div class="name">uniE014</div>
        </li>

        <li>
            <i class="icon">&#xe015;</i>
            <div class="code">\e015</div>
            <div class="name">uniE015</div>
        </li>

        <li>
            <i class="icon">&#xe016;</i>
            <div class="code">\e016</div>
            <div class="name">uniE016</div>
        </li>

        <li>
            <i class="icon">&#xe017;</i>
            <div class="code">\e017</div>
            <div class="name">uniE017</div>
        </li>

        <li>
            <i class="icon">&#xe018;</i>
            <div class="code">\e018</div>
            <div class="name">uniE018</div>
        </li>

        <li>
            <i class="icon">&#xe019;</i>
            <div class="code">\e019</div>
            <div class="name">uniE019</div>
        </li>

        <li>
            <i class="icon">&#xe01a;</i>
            <div class="code">\e01a</div>
            <div class="name">uniE01A</div>
        </li>

        <li>
            <i class="icon">&#xe01b;</i>
            <div class="code">\e01b</div>
            <div class="name">uniE01B</div>
        </li>

        <li>
            <i class="icon">&#xe01c;</i>
            <div class="code">\e01c</div>
            <div class="name">uniE01C</div>
        </li>

        <li>
            <i class="icon">&#xe01d;</i>
            <div class="code">\e01d</div>
            <div class="name">uniE01D</div>
        </li>

        <li>
            <i class="icon">&#xe01e;</i>
            <div class="code">\e01e</div>
            <div class="name">uniE01E</div>
        </li>

        <li>
            <i class="icon">&#xe01f;</i>
            <div class="code">\e01f</div>
            <div class="name">uniE01F</div>
        </li>

        <li>
            <i class="icon">&#xe020;</i>
            <div class="code">\e020</div>
            <div class="name">uniE020</div>
        </li>

        <li>
            <i class="icon">&#xe021;</i>
            <div class="code">\e021</div>
            <div class="name">uniE021</div>
        </li>

        <li>
            <i class="icon">&#xe022;</i>
            <div class="code">\e022</div>
            <div class="name">uniE022</div>
        </li>

        <li>
            <i class="icon">&#xe023;</i>
            <div class="code">\e023</div>
            <div class="name">uniE023</div>
        </li>

        <li>
            <i class="icon">&#xe024;</i>
            <div class="code">\e024</div>
            <div class="name">uniE024</div>
        </li>

        <li>
            <i class="icon">&#xe025;</i>
            <div class="code">\e025</div>
            <div class="name">uniE025</div>
        </li>

        <li>
            <i class="icon">&#xe026;</i>
            <div class="code">\e026</div>
            <div class="name">uniE026</div>
        </li>

        <li>
            <i class="icon">&#xe027;</i>
            <div class="code">\e027</div>
            <div class="name">uniE027</div>
        </li>

        <li>
            <i class="icon">&#xe028;</i>
            <div class="code">\e028</div>
            <div class="name">uniE028</div>
        </li>

        <li>
            <i class="icon">&#xe029;</i>
            <div class="code">\e029</div>
            <div class="name">uniE029</div>
        </li>

    </ul>
    <div class="helps">第一步：使用font-face声明字体
<pre>
@font-face {
    font-family: 'fonteditor';
    src: url('fonteditor.eot'); /* IE9*/
    src: url('fonteditor.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonteditor.woff') format('woff'), /* chrome、firefox */
    url('fonteditor.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('fonteditor.svg#uxfonteditor') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用fonteditor的样式
<pre>
.fonteditor {
    font-family:"fonteditor" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
    &lt;i class="fonteditor"&gt;&amp;#x33&lt;/i&gt;
</pre>
</div>
</div>


</body>
</html>
